<template>
	<view class="lockusers">
		<view class="head_view">
			<view class="menu_view">
				<view class="menu_item" v-for="(item,index) in menuList" :key="index" @click="selectIndexEvent(index)">
					<block v-if="selectIndex == index">
						<view class="select_view">
							<view class="num">{{item.num}}</view>
							<view class="name select">{{item.name}}</view>
							<view class="triangle"></view>
						</view>
					</block>
					<block v-else>
						<view class="normal_view">
							<view class="num">{{item.num}}</view>
							<view class="name normal">{{item.name}}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<mescroll-uni @getData="getListData" @init="mescrollInit" class="member-point" ref="mescroll" :top="205">
			<view slot="list">
				<block v-if="listData.length > 0">
					<view class="content">
						<view class="item" v-for="(item,index) in listData" :key="index">
							<view class="item_part1">
								<image :src="item.headimg ? $util.img(item.headimg) : $util.getDefaultImage().default_headimg"></image>
								<view class="item_name" v-if="toolsTpye == 2">{{item.fenxiao_name}}</view>
								<view class="item_name" v-if="toolsTpye == 1">{{item.nickname}}</view>
								<!-- <view class="item_type" :class="grade == 1 ? 'members' : 'ordinary'" v-if="toolsTpye == 1">会员</view> -->
							</view>
							<view class="item_time" v-if="toolsTpye == 2">{{$util.timeStampTurnTime(item.create_time,100)}}</view>
							<view class="item_time" v-else-if="toolsTpye == 1">{{$util.timeStampTurnTime(item.reg_time,100)}}</view>
						</view>
					</view>
				</block>
				<block v-else>
					<ns-empty text="暂无相关数据" :isIndex="!1"></ns-empty>
				</block>
			</view>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				toolsTpye:'',//1、锁定用户 ；2、分销团队
				menuList:[],
				/* 锁定用户 */
				locksList:[{
					name:'累计人数',
					num:0
				},
				{
					name:'昨日新增',
					num:0
				},
				{
					name:'今日新增',
					num:0
				},
				{
					name:'七日新增',
					num:0
				}],
				grade:1,//用于区分会员和普通身份，后面有数据时可删除
				/* 分销团队 */
				distribution_teams:[{
					name:'团队总人数',
					num:0,
					status:0
				},
				{
					name:'直接人数',
					num:0,
					status:1
				},
				{
					name:'间接人数',
					num:0,
					status:2
				},
				{
					name:'今日新增',
					num:0,
					status:3
				}],
				selectIndex:0,
				listData:[],
				mescroll:null,
			}
		},
		onLoad(option) {
			let title = '锁定用户'
			this.toolsTpye = option.toolsTpye
			this.menuList = this.locksList
			if(option.toolsTpye == 2){
				title = '推广团队'
				this.menuList = this.distribution_teams
			}
			uni.setNavigationBarTitle({
				title:title
			})
		},
		methods:{
			/* 切换菜单 */
			selectIndexEvent(index){
				if(index == 3){
					this.$util.redirectTo('/otherpages/fenxiao/new_record/new_record',{
						toolsTpye:this.toolsTpye
					})
				}else{
					if(this.toolsTpye == 2){
						this.selectIndex = index
						this.mescroll.resetUpScroll()
					}
					if(this.toolsTpye == 1 && index != 0){
						this.$util.redirectTo('/otherpages/fenxiao/new_record/new_record',{
							toolsTpye:this.toolsTpye
						})
					}
				}
			},
			/* 获取列表数据 */
			getListData(mescroll){
				if (mescroll.num == 1) {
					this.listData = [];
				}
				this.mescroll = mescroll
				let url = '/fenxiao/api/fenxiao/getTeamlist'
				let params = {
					page: mescroll.num,
					page_size: mescroll.size,
					status:this.distribution_teams[this.selectIndex].status,
					page: mescroll.num,
					page_size: mescroll.size,
				}
				if(this.toolsTpye == 1){
					url = '/fenxiao/api/fenxiao/getMemberlist'
					params = {
						page: mescroll.num,
						page_size: mescroll.size,
						status:1
					}
				}
				this.$api.sendRequest({
					url:url,
					data: params,
					success: res => {
						if (res.code == 0) {
							let newArr = [];
							newArr = res.data.list;
							mescroll.endSuccess(newArr.length);
							if (mescroll.num == 1) this.listData = []; //如果是第一页需手动制空列表
							this.listData = this.listData.concat(newArr); //追加新数据
							mescroll.endBySize(this.listData.length, res.data.count)
							if(this.toolsTpye == 1){
								this.locksList[0].num = res.data.data.toatl
								this.locksList[1].num = res.data.data.yestoday
								this.locksList[2].num = res.data.data.day
								this.locksList[3].num = res.data.data.seven
							}else{
								this.distribution_teams[0].num = res.data.data.team
								this.distribution_teams[1].num = res.data.data.direct
								this.distribution_teams[2].num = res.data.data.interposition
								this.distribution_teams[3].num = res.data.data.today
							}
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail:res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.lockusers{
		.head_view{
			padding: 30rpx;
			height: 420rpx;
			background: linear-gradient(180deg, rgba(199,159,69,0.75) 0%, #F5F5F5 100%);
			.menu_view{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.menu_item{
					width: 23%;
					.select_view{
						display: flex;
						justify-content: center;
						flex-direction: column;
						align-items: center;
						background-size: 100%;
						height: 145rpx;
						background: #C79F45;
						position: relative;
						border-radius: 16rpx;
						.triangle {
							border-left: 25rpx solid transparent;
							border-right: 25rpx solid transparent;
							border-top: 20rpx solid #C79F45;
							/*我们一般根据方向来写三角形，这样容易记忆；箭头指向的反方向的颜色设置为你想要的，然后箭头方向不要写，另外两个方向的颜色设置为transperent透明*/
							position: absolute;
							bottom: -20rpx;
							left: 50%;
							margin-left: -20rpx;
						}
					}
					.normal_view{
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						height: 130rpx;
						background: #fff;
						border-radius: 16rpx;
					}
				}
			}
		}
		.content{
			padding: 0rpx 30rpx;
			.item{
				display: flex;
				padding: 0rpx 30rpx;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				border-radius: 8rpx;
				height: 132rpx;
				background: #fff;
				.item_part1{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					image{
						width: 72rpx;
						height: 72rpx;
						border-radius: 36rpx;
					}
					.item_name{
						max-width: 400rpx;
						margin-left: 12rpx;
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #303133;
						line-height: 40rpx;
						word-wrap: break-word;
						word-break: break-all;
						white-space: pre-line;
					}
					.item_type{
						margin-left: 12rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 80rpx;
						height: 32rpx;
						border-radius: 20px;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						line-height: 33rpx;
						&.members{
							color: #C79F45;
							border: 1px solid #C79F45;
						}
						&.ordinary{
							border: 1px solid #909399;
							color: #909399;
						}
					}
				}
				.item_time{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #909399;
					line-height: 34rpx;
				}
			}
		}
	}
	.num{
		margin-top: 10rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
	}
	.name{
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #463510;
		line-height: 50rpx;
		&.select{
			color: #463510;
		}
		&.normal{
			color: #909399
		}
	}
</style>